<template>
  <!-- 登录 -->
  <view>
    <uni-nav-bar
      left-icon="closeempty"
      statusBar
      :border="false"
      @clickLeft="close"
    />
    <view style="height: 200rpx"> </view>
    <view class="pd">
      <view
        class="t-c color-gray"
        style="font-size: 50rpx; padding-bottom: 100rpx"
      >
        账号密码登录
      </view>
      <view class="account" v-if="!isphone">
        <view class="">
          <input
            type="text"
            placeholder="昵称/手机号/邮箱"
            v-model="username"
          />
        </view>
        <view class="password">
          <input type="text" placeholder="请输入密码" v-model="password" />
          <text
            class="color-gray"
            style="position: absolute; right: 0; bottom: 15px"
            >忘记密码</text
          >
        </view>
      </view>

      <view class="account" v-else>
        <view class="" style="position: relative">
          <text
            class="font-weight"
            style="position: absolute; left: 0; top: 30rpx"
            >+86</text
          >
          <input
            type="number"
            placeholder="手机号"
            style="padding-left: 40px"
            v-model="phone"
          />
        </view>
        <view class="password">
          <input type="number" placeholder="请输入验证码" v-model="code" />
          <text
            class="mainBg code t-c"
            style=""
            :class="phone.length < 10 ? 'bg-main-disabled' : ''"
            @click="getCode"
          >
            {{ codeTime }}
          </text>
        </view>
      </view>

      <button
        class="mainBg"
        style="border-radius: 200rpx; color: #fff; margin: 30rpx 0"
        :disabled="disabled"
        :class="disabled ? 'bg-main-disabled' : ''"
        type="number"
        @click="submit"
      >
        登录
      </button>
      <view class="flex flex-c cut">
        <text @click="cut">{{ isphone ? "账号登录" : "验证码登录" }}</text>
        <text style="margin: 0 20rpx"> |</text>
        <text>登录遇到问题</text>
      </view>

      <view class="color-gray t-c" style="margin: 40rpx 0">社交账号登录</view>

      <other-login back></other-login>

      <view class="color-gray t-c" style="margin: 40rpx 0"
        >注册即代表你同意 <text style="color: #007aff">社区协议</text>
      </view>
    </view>
  </view>
</template>

<script>
import { userLogin, phoneLogin, sendcode } from "@/api/api";
import otherLogin from "@/components/common/other-login.vue";
export default {
  components: { otherLogin },
  data() {
    return {
      isphone: false, //判断是否为手机号登录
      username: "",
      password: "",
      code: "",
      phone: "",
      codeTime: "获取验证码",
    };
  },
  computed: {
    disabled() {
      if (
        (this.username !== "" && this.password !== "") ||
        (this.code !== "" && this.phone !== "")
      ) {
        return false;
      }
      return true;
    },
  },
  methods: {
    close() {
      uni.navigateBack();
    },
    // 切换登录
    cut() {
      this.isphone = !this.isphone;
      this.username = "";
      this.password = "";
      this.code = "";
      this.phone = "";
    },
    //   手机号匹配规则
    check() {
      var rule = /^1[34578]\d{9}$/;
      if (!rule.test(this.phone)) {
        uni.showToast({
          title: "手机号格式不正确",
          icon: "none",
        });
        return false;
      }
      return true;
    },
    // 获取验证码
    async getCode() {
      if (this.check()) {
        if (this.codeTime !== "获取验证码") return;

        this.codeTime = 60;

        let timer = setInterval(() => {
          if (this.codeTime === 1) {
            this.codeTime = "获取验证码";
            clearInterval(timer);
            return;
          }
          this.codeTime--;
        }, 1000);
        // setTimeout(() => {
        //   uni.showToast({
        //     icon: "none",
        //     title: "验证码为1234",
        //   });
        // }, 2000);
        // 发送请求获取验证码
        let code = await sendcode(this.phone);
        console.log(code);
        uni.showToast({
          title: `验证码为${code.msg}`,
          icon: "none",
        });
      }
    },
    async submit() {
      //   uni.showToast({
      //     title: "登录成功",
      //   });
      let res;
      if (this.isphone) {
        res = await phoneLogin({
          phone: this.phone,
          code: this.code,
        });
      } else {
        res = await userLogin({
          username: this.username,
          password: this.password,
        });
        console.log(res.id);
      }

      if (res.id) {
        uni.showToast({
          title: "登录成功",
          icon: "none",
        });
        this.$store.commit("isLogin", res);
        setTimeout(() => {
          uni.navigateBack();
        }, 100);
      } else {
        uni.showToast({
          title: `登录失败`,
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="less">
.account {
  input {
    padding: 30rpx 0;
  }
}
.password {
  position: relative;
}
.cut {
  text {
    color: #33677c;
  }
}
.code {
  position: absolute;
  right: 0;
  bottom: 10px;
  padding: 20rpx 10rpx;
  color: #fff;
  width: 140rpx;
  display: block;
  font-size: 28rpx;
}
</style>
